<template>
  <div class="box">
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      class='header'
    >
      <template #action>
        <div @click="onSearch">取消</div>
      </template>
    </van-search>

    <!-- 检索列表 -->
    <ul class='city' v-if='value'>
        <li v-for="data in compList" :key="data.cinemaId">
            <div class="left">
                <span>{{ data.name }}</span>
                <span>{{ data.address }}</span>
            </div>
            <div class="right">
                <span>
                    <span class="txt">￥</span>{{ data.lowPrice / 100
                    }}<span class="txt">起</span>
                </span>
                <span> 距离未知 </span>
            </div>
        </li>
    </ul>

        <!-- 离你最近 -->
    <div class="lately" v-else>
      <div class="title">离你最近</div>
      <ul v-if='latelyList'>
        <li v-for="data in latelyList" :key="data.cinemaId">
          {{ data.name }}
        </li>
      </ul>
      <div class='tip' v-else>暂时没有离您最近的</div>
    </div>
  </div>
</template>
<script>
import http from '@/util/http'
import { mapState, mapActions } from 'vuex'
import mixins from '@/util/mixins'
export default {
  mixins: [mixins],
  data () {
    return {
      latelyList: null,
      value: ''
    }
  },
  methods: {
    ...mapActions(['getCinemasData']),
    onSearch () {
      this.$router.back()
    }
  },
  computed: {
    ...mapState(['cityId', 'cinemasList']),
    compList () {
      return this.cinemasList.filter(
        item => item.address.toUpperCase().includes(this.value.toUpperCase()) ||
          item.name.toUpperCase().includes(this.value.toUpperCase()))
    }
  },
  mounted () {
    if (this.cinemasList.length === 0) {
      this.getCinemasData(this.cityId)
    }

    http({
      url: `/gateway?cityId=${this.cityId}&k=1962228`,
      headers: {
        'X-Host': 'mall.film-ticket.cinema.recommend'
      }
    }).then((res) => {
      this.latelyList = res.data.data.cinemas
    })
  }
}
</script>
<style lang="scss" scoped>
.header{
  position: sticky;
  top:0;
  z-index: 999;
}

.van-search {
  border-bottom:1px solid rgba(128, 128, 128, 0.088);
  .van-cell {
    font-size: 12px;
  }
}

.box {
  width: 100%;
  height: 100%;
  background: white;
  .lately {
    width: 90%;
    margin: 0 auto;
    .title {
      margin: 18px 0;
      font-size: 13px;
      color: #bdc0c5;
      line-height: 13px;
    }
    ul {
      overflow: hidden;
      li {
        padding: 8px 12px;
        background: hsla(0, 0%, 95.7%, 0.6);
        float: left;
        font-size: 13px;
        margin: 0 10px 10px 0;
      }
    }
    .tip{
      font-size: 13px;
    }
  }
}

.city {
    li {
        width: calc(100% - 30px);
        height: 45px;
        padding: 15px;
        display: flex;
        justify-content: space-between;
        .left {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            span {
                display: block;
                width: 17.5rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            span:first-child {
                font-size: 15px;
            }
            span:last-child {
                font-size: 12px;
                color: gray;
            }
        }
        .right {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            span {
                text-align: center;
            }
            span:first-child {
                color: #ff5f16;
                font-size: 15px;
                .txt {
                font-size: 10px;
                color: #ff5f16;
                }
            }
            span:last-child {
                font-size: 11px;
                color: gray;
            }
        }
    }
}

</style>
